<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="../resources/home/css/regist.css">
<script src="../resources/home/js/jquery-2.1.4.min.js"></script>
<style type="text/css">
#register{
width: 290px;
    height: 35px;
    background-color: red;
    color: #fff;
    border: none;
    margin-top: 15px;
    letter-spacing: 10px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

</style>
</head>
<body>
        <div class="wrapper">
            <article>
                <h1><em>博客</em><span>个人博客技术有限公司</span></h1>
                <div class="main">
                    <form>
                        <div class="tel">
                            <input type="tel" name="phone" placeholder="手机号" id="tel"><em>由11个字符组成！</em>
                        </div>
                        <div class="userName">
                            <input type="text" name="username" placeholder="用户名" id="userName"><em></em>
                        </div>
                        <div class="password">
                            <input type="password" name="password" placeholder="密码" id="password"><em></em>
                        </div>
                        <div class="againpwd">
                            <input type="password"  placeholder="再次输入密码" id="againpassword"><em></em>
                        </div>
                        <div class="login-center clearfix">
                    <div class="login-center-input">
                        <input style="width:50%;" type="text" name="cpacha" id="cpacha" value="" placeholder="请输入验证码" onfocus="this.placeholder=&#39;&#39;" onblur="this.placeholder=&#39;请输入验证码&#39;">
                        <img id="cpacha-img" title="点击切换验证码" style="cursor:pointer;" src="../system/get_cpacha?vl=4&w=150&h=40&type=homeRegisterCpacha" width="110px" height="30px" onclick="changeCpacha()">
                    </div>
                </div>
                        <div  id="register" class="register-button"><span>注册</span></div>
                    </form>
                </div>
            </article>
            <footer>
                <ul>
                    <li><a href="https://www.yuanlrc.com/">联系我们</a></li>
                    <li><a href="https://www.yuanlrc.com/">关于我们</a></li>
                    <li><a href="https://www.yuanlrc.com/">人才招聘</a></li>
                    <li><a href="https://www.yuanlrc.com/">友情链接</a></li>
                    <li><a href="https://www.yuanlrc.com/">公司地址</a></li>
                    <li><a href="https://www.yuanlrc.com/">关注我们</a></li>
                </ul>
                <p>本网站版权归博客技术有限公司所有，未经许可，不得转载。</p>
            </footer>
        </div>
    <script type="text/javascript">
    function changeCpacha(){
		$("#cpacha-img").attr("src",'../system/get_cpacha?vl=4&w=150&h=40&type=homeRegisterCpacha&t=' + new Date().getTime());
	}

    document.querySelector(".register-button").onclick = function(){
    	var phone=$("#tel").val();
    	var username=$("#userName").val();
    	var password=$("#password").val();
    	var againpassword=$("#againpassword").val();
    	var cpacha = $("#cpacha").val();
     	if(phone==''||phone=='undefined'){
    		alert("请填写手机号！");

			return false;
    	}
    	if(username == '' || username == 'undefined'){
			alert("请填写用户名！");
			return false;
		}
    	if(password == '' || password == 'undefined'){
			alert("请填写密码！");
			return;
		}
    	if(password!=againpassword){
    		alert("两次密码不一致！")
    		return;
    	}
    	if(cpacha == '' || cpacha == 'undefined'){
			alert("请填写验证码！");
			return;
		}
		$.ajax({
			url:'../index/register',
			data:{username:username,password:password,cpacha:cpacha,phone:phone},
			type:'post',
			dataType:'json',
			success:function(data){
				if(data.type == 'success'){
					window.parent.location = '../index/login';
				}else{
					alert(data.msg);
					changeCpacha();
				}
			}
		});

}

    </script>
</body>
</html>
